import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

ApplicationWindow {
    id: applicationWindow1
    visible: true
    width: 540
    height: 900
    title: qsTr("________")

    toolBar: Rectangle {
        id: top_menu
        width: parent.width
        height: 60
        color: "#555555"

        Rectangle {
            id: rectangle2
            width: 40
            color: "#00000000"
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 10
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.top: parent.top
            anchors.topMargin: 10

            Rectangle {
                id: rectangle3
                y: 6
                height: 6
                color: "#ffffff"
                radius: 3
                anchors.right: parent.right
                anchors.rightMargin: 0
                anchors.left: parent.left
                anchors.leftMargin: 0
            }

            Rectangle {
                id: rectangle4
                y: 18
                height: 6
                color: "#ffffff"
                radius: 3
                border.width: 0
                anchors.right: parent.right
                anchors.rightMargin: 0
                anchors.left: parent.left
                anchors.leftMargin: 0
            }

            Rectangle {
                id: rectangle5
                y: 30
                height: 6
                color: "#ffffff"
                radius: 3
                anchors.right: parent.right
                anchors.rightMargin: 0
                anchors.left: parent.left
                anchors.leftMargin: 0
            }

            MouseArea {
                anchors.fill: parent
                onClicked: if(sideMenu.state == "VISIBLE") sideMenu.state = "INVISIBLE"; else sideMenu.state = "VISIBLE";
            }
        }

        Rectangle {
            id: rectangle6
            x: 448
            width: 40
            color: "#ffffff"
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 10
            anchors.top: parent.top
            anchors.topMargin: 10
            anchors.right: parent.right
            anchors.rightMargin: 10
        }

        Text {
            id: titulo
            x: 119
            y: 23
            color: "#ffffff"
            text: qsTr("TITULO")
            anchors.horizontalCenter: parent.horizontalCenter
            font.bold: true
            anchors.verticalCenter: parent.verticalCenter
            font.pixelSize: 20
        }
    }


    StackView {
        id: body
        width: parent.width
        height: parent.height

    }

    Rectangle {
        id: sideMenu
        x: -width
        y: 0
        width: parent.width
        height: parent.height
        color: "#00000000"
        border.color: "#00000000"
        state: "INVISIBLE"

        MouseArea {
            width: parent.width * 5/100
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            anchors.right: parent.right
            anchors.rightMargin: 0
            anchors.top: parent.top
            anchors.topMargin: 0
            onClicked: if(sideMenu.state == "VISIBLE") sideMenu.state = "INVISIBLE"; else sideMenu.state = "VISIBLE";
        }

        Rectangle {
            id: menuContent
            x: -width
            y: 0
            width: parent.width * 95/100
            height: parent.height
            color: "#ffffff"

            ListView {
                id: menuItems
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 8
                anchors.top: parent.top
                anchors.topMargin: 8
                anchors.right: parent.right
                anchors.rightMargin: 8
                anchors.left: parent.left
                anchors.leftMargin: 8
                delegate: Item {
                    width: 80
                    height: 35
                    Row {
                        id: menuRow
                        Item {
                            width: category?1:20;
                            height: 35
                        }

                        Text {
                            text: name
                            font.bold: category
                            font.pixelSize: 20
                            anchors.verticalCenter: parent.verticalCenter
                        }
                    }
                }
                model: ListModel {
                    ListElement {
                        name: "COLETA"
                        category: true
                    }

                    ListElement {
                        name: "EMPRESA A"
                        category: false
                    }

                    ListElement {
                        name: "EMPRESA B"
                        category: false
                    }

                    ListElement {
                        name: "EMPRESA C"
                        category: false
                    }

                    ListElement {
                        name: "EMPRESA D"
                        category: false
                    }

                    ListElement {
                        name: "VISITADO"
                        category: true
                    }

                    ListElement {
                        name: "EMPRESA E"
                        category: false
                    }

                    ListElement {
                        name: "EMPRESA F"
                        category: false
                    }

                    ListElement {
                        name: "ANOTAÇÃO"
                        category: true
                    }

                    ListElement {
                        name: "MEMO"
                        category: false
                    }

                    ListElement {
                        name: "FOTOGRAFIA"
                        category: false
                    }

                    ListElement {
                        name: "CONFIGURAÇÃO"
                        category: true
                    }

                }
            }

        }

        states: [
            State {
                name: "INVISIBLE"
                PropertyChanges { target: sideMenu; color: "#00000000"}
                PropertyChanges { target: sideMenu; x: -sideMenu.width}

                PropertyChanges { target: menuContent; x: -menuContent.width}
            },
            State {
                name: "VISIBLE"
                PropertyChanges { target: sideMenu; color: "#50000000"}
                PropertyChanges { target: sideMenu; x: 0}

                PropertyChanges { target: menuContent; x: 0}
            }
        ]

        transitions: [
            Transition {
                from: "INVISIBLE"
                to: "VISIBLE"
                ColorAnimation { target: sideMenu; properties: "color"; to: "#50000000"; duration: 500; easing { type: Easing.OutQuint }}
                NumberAnimation { target: sideMenu; properties: "x"; to: 0; duration: 1}

                NumberAnimation { target: menuContent; properties: "x"; to: 0; duration: 500; easing { type: Easing.OutQuint }}
            },
            Transition {
                from: "VISIBLE"
                to: "INVISIBLE"
                ColorAnimation { target: sideMenu; properties: "color"; to: "#00000000";  duration: 500; easing { type: Easing.OutQuint }}

                NumberAnimation { target: menuContent; properties: "x"; to: -menuContent.width; duration: 500; easing { type: Easing.OutQuint }}
            }
        ]

    }

    statusBar: Rectangle {
        height: 95
        width: parent.width
        color: "#f7f7f7"

        Row {
            id: bottom_menu
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.right: parent.right
            anchors.rightMargin: 10
            anchors.top: parent.top
            anchors.topMargin: 10
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 10
            spacing: (width - height*5)/4

            Rectangle {
                id: rectangle11
                x: 0
                width: height
                color: "#bbbbbb"
                radius: 5
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 0
                anchors.top: parent.top
                anchors.topMargin: 0

                Text {
                    id: text7
                    x: 25
                    y: 8
                    text: "Home"
                    anchors.horizontalCenter: parent.horizontalCenter
                    font.pixelSize: 16
                }

                Rectangle {
                    id: rectangle16
                    color: "#eeeeee"
                    radius: 5
                    anchors.top: text7.bottom
                    anchors.topMargin: 5
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 3
                    anchors.right: parent.right
                    anchors.rightMargin: 3
                    anchors.left: parent.left
                    anchors.leftMargin: 3
                }
            }

            Rectangle {
                id: rectangle12
                x: 0
                width: height
                color: "#bbbbbb"
                radius: 5
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 0
                anchors.top: parent.top
                anchors.topMargin: 0

                Text {
                    id: text8
                    x: 25
                    y: 8
                    text: qsTr("Empresa")
                    anchors.horizontalCenter: parent.horizontalCenter
                    font.pixelSize: 16
                }

                Rectangle {
                    id: rectangle17
                    color: "#eeeeee"
                    radius: 5
                    anchors.top: text8.bottom
                    anchors.topMargin: 5
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 3
                    anchors.right: parent.right
                    anchors.rightMargin: 3
                    anchors.left: parent.left
                    anchors.leftMargin: 3
                }
            }

            Rectangle {
                id: rectangle13
                width: height
                color: "#bbbbbb"
                radius: 5
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 0
                anchors.top: parent.top
                anchors.topMargin: 0

                Text {
                    id: text9
                    x: 25
                    y: 8
                    text: qsTr("Busca")
                    anchors.horizontalCenter: parent.horizontalCenter
                    font.pixelSize: 16
                }

                Rectangle {
                    id: rectangle18
                    color: "#eeeeee"
                    radius: 5
                    anchors.top: text9.bottom
                    anchors.topMargin: 5
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 3
                    anchors.right: parent.right
                    anchors.rightMargin: 3
                    anchors.left: parent.left
                    anchors.leftMargin: 3
                }
            }

            Rectangle {
                id: rectangle14
                x: 0
                width: height
                color: "#bbbbbb"
                radius: 5
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 0
                anchors.top: parent.top
                anchors.topMargin: 0

                Text {
                    id: text10
                    x: 25
                    y: 8
                    text: qsTr("Rota")
                    anchors.horizontalCenter: parent.horizontalCenter
                    font.pixelSize: 16
                }

                Rectangle {
                    id: rectangle19
                    color: "#eeeeee"
                    radius: 5
                    anchors.top: text10.bottom
                    anchors.topMargin: 5
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 3
                    anchors.right: parent.right
                    anchors.rightMargin: 3
                    anchors.left: parent.left
                    anchors.leftMargin: 3
                }
            }

            Rectangle {
                id: rectangle15
                x: 0
                width: height
                color: "#bbbbbb"
                radius: 5
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 0
                anchors.top: parent.top
                anchors.topMargin: 0

                Text {
                    id: text11
                    x: 25
                    y: 8
                    text: qsTr("Msg")
                    anchors.horizontalCenter: parent.horizontalCenter
                    font.pixelSize: 16
                }

                Rectangle {
                    id: rectangle20
                    color: "#eeeeee"
                    radius: 5
                    anchors.top: text11.bottom
                    anchors.topMargin: 5
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 3
                    anchors.right: parent.right
                    anchors.rightMargin: 3
                    anchors.left: parent.left
                    anchors.leftMargin: 3
                }
            }
        }
    }
}
